import { ElNotification } from 'element-plus'

// 六爻排盘API接口
import {
    paiPanApi // 开始排盘
} from '@/api/paipan/liuyao-api.js'

export default {
    el: 'app',
    data() {
        return {

            // 选项
            options: {
                name: '', // 姓名
                occupy: '', // 占事
                date: '', // 日期
                leapMonth: 0, // 是否闰月（true:是。false:否）
                dateType: 0, // 日期类型
                sex: 1, // 性别
                qiGuaMode: 0, // 起卦模式（0:日期。1:自动。2:手动）
                yearGanZhiSet: 2, // 年干支设置
                monthGanZhiSet: 1, // 月干支设置
                dayGanZhiSet: 0, // 日干支设置
                hourGanZhiSet: 0, // 时干支设置
                liuYao: 0, // 六爻（上爻）
                wuYao: 0, // 五爻
                siYao: 0, // 四爻
                sanYao: 0, // 三爻
                erYao: 0, // 二爻
                yiYao: 0 // 一爻（初爻）
            },
            sexOptions: [
                { value: 1, label: '男' },
                { value: 0, label: '女' }
            ],
            leapMonthOptions: [
                { value: 0, label: '非闰月' },
                { value: 1, label: '闰月' }
            ],
            dateTypeOptions: [
                { value: 0, label: '公历' },
                { value: 1, label: '农历' }
            ],
            qiGuaModeOptions: [
                { value: 0, label: '日期' },
                { value: 1, label: '自动' },
                { value: 2, label: '手动' }
            ],
            yearGanZhiSetOptions: [
                { value: 0, label: '以正月初一作为新年的开始' },
                { value: 1, label: '以立春当天作为新年的开始' },
                { value: 2, label: '以立春交接时刻作为新年的开始' }
            ],
            monthGanZhiSetOptions: [
                { value: 0, label: '以节交接当天起算' },
                { value: 1, label: '以节交接时刻起算' }
            ],
            dayGanZhiSetOptions: [
                { value: 0, label: '晚子时日干支算当天' },
                { value: 1, label: '晚子时日干支算明天' }
            ],
            hourGanZhiSetOptions: [
                { value: 0, label: '支持早子时和晚子时' }
            ],
            yaoOptions: [
                { value: 0, label: '—（2正1背）' },
                { value: 1, label: '- -（1正2背）' },
                { value: 2, label: '— ○（0正3背）' },
                { value: 3, label: '- - ×（3正0背）' }
            ],

            // 数据
            data: {}, // 数据
            isData: false, // 数据状态（true:存在。false:不存在）
            dataPage: 1, // 数据显示界面（1:基础信息。2:更多信息）
            liuYaoIndex: [5, 4, 3, 2, 1, 0], // 六爻从上至下索引


            // 其他
            muColor: '#00ad00', // 五行木颜色
            huoColor: '#d40000', // 五行火颜色
            tuColor: '#b16400', // 五行土颜色
            jinColor: '#efa800', // 五行金颜色
            shuiColor: '#2e83f6' // 五行水颜色
        }
    },
    watch: {
    },
    created() {
        this.options.date = new Date();
    },
    mounted() {
        this.$refs.videoRef.addEventListener('ended', this.restartVideoMethod());
    },
    methods: {

        /**
         * 播放MP4
         */
        restartVideoMethod() {

            this.$refs.videoRef.currentTime = 0;
            this.$refs.videoRef.play();

        },

        /**
         * 开始排盘
         */
        paiPanMethod() {

            // 条件构造
            let query = this.options;

            // 发送请求
            paiPanApi(query).then((res) => {
                if (String(res.data.code) === '200' && null !== res.data.data) {
                    var data = res.data.data;

                    this.data = data; // 排盘数据

                    this.isData = true; // 数据状态（true:存在。false:不存在）

                }
            })

        },

        /**
         * 返回排盘
         */
        fanHuiPaiPanMethod() {

            this.isData = false; // 数据状态（true:存在。false:不存在）
            this.dataPage = 1; // 数据显示界面（1:基础信息。2:更多信息）

        },

        /**
         * 切换为基础信息
         */
        jiChuMethod() {

            this.dataPage = 1; // 数据显示界面（1:基础信息。2:更多信息）

        },

        /**
         * 切换为更多信息
         */
        gengDuoMethod() {

            this.dataPage = 2; // 数据显示界面（1:基础信息。2:更多信息）

        },

        /**
         * 五行高亮
         * 
         * @param wuXing 五行
         */
        wuXingGaoLiangMethod(wuXing) {

            if ('木' === wuXing) {
                return ('<font color=' + this.muColor + '">木</font>');
            }
            if ('火' === wuXing) {
                return ('<font color="' + this.huoColor + '">火</font>');
            }
            if ('土' === wuXing) {
                return ('<font color="' + this.tuColor + '">土</font>');
            }
            if ('金' === wuXing) {
                return ('<font color="' + this.jinColor + '">金</font>');
            }
            if ('水' === wuXing) {
                return ('<font color="' + this.shuiColor + '">水</font>');
            }

        },

        /**
         * 干支高亮（阴干支斜体）
         * 
         * @param ganOrZhi 天干或地支
         */
        ganZhiGaoLiangMethod(ganOrZhi) {

            // 阳干支
            if ('甲' === ganOrZhi || '寅' === ganOrZhi) {
                return ('<font color="' + this.muColor + '">' + ganOrZhi + '</font>');
            }
            if ('丙' === ganOrZhi || '午' === ganOrZhi) {
                return ('<font color="' + this.huoColor + '">' + ganOrZhi + '</font>');
            }
            if ('戊' === ganOrZhi || '辰' === ganOrZhi || '戌' == ganOrZhi) {
                return ('<font color="' + this.tuColor + '">' + ganOrZhi + '</font>');
            }
            if ('庚' === ganOrZhi || '申' === ganOrZhi) {
                return ('<font color="' + this.jinColor + '">' + ganOrZhi + '</font>');
            }
            if ('壬' === ganOrZhi || '子' === ganOrZhi) {
                return ('<font color="' + this.shuiColor + '">' + ganOrZhi + '</font>');
            }

            // 阴干支
            if ('乙' === ganOrZhi || '卯' === ganOrZhi) {
                if (this.ganZhiYinYang) return ('<font color="' + this.muColor + '"><i>' + ganOrZhi + '</i></font>');
                return ('<font color="' + this.muColor + '">' + ganOrZhi + '</font>');
            }
            if ('丁' === ganOrZhi || '巳' === ganOrZhi) {
                if (this.ganZhiYinYang) return ('<font color="' + this.huoColor + '"><i>' + ganOrZhi + '</i></font>');
                return ('<font color="' + this.huoColor + '">' + ganOrZhi + '</font>');
            }
            if ('己' === ganOrZhi || '丑' === ganOrZhi || '未' === ganOrZhi) {
                if (this.ganZhiYinYang) return ('<font color="' + this.tuColor + '"><i>' + ganOrZhi + '</i></font>');
                return ('<font color="' + this.tuColor + '">' + ganOrZhi + '</font>');
            }
            if ('辛' === ganOrZhi || '酉' === ganOrZhi) {
                if (this.ganZhiYinYang) return ('<font color="' + this.jinColor + '"><i>' + ganOrZhi + '</i></font>');
                return ('<font color="' + this.jinColor + '">' + ganOrZhi + '</font>');
            }
            if ('癸' === ganOrZhi || '亥' === ganOrZhi) {
                if (this.ganZhiYinYang) return ('<font color="' + this.shuiColor + '"><i>' + ganOrZhi + '</i></font>');
                return ('<font color="' + this.shuiColor + '">' + ganOrZhi + '</font>');
            }

        },

        /**
         * 通知提示（右上角弹出）
         * 
         * @param type 消息类型（success、warning、info、error）
         * @param duration 自动关闭延迟，0为不关闭（单位：毫秒）
         * @param title 标题
         * @param message 提示内容
         */
        notification(type, duration, title, message) {

            ElNotification({
                type: type,
                title: title,
                message: message,
                duration: duration,
                position: 'top-right',
                dangerouslyUseHTMLString: true
            })

        }

    }
}
